<!-- 练习题 -->
<template>
  <div class="exercises">
    <div class="box">
      <div>es6新特性</div>
      <div class="content">
        <li>类</li>
        <li>模块化</li>
        <li>箭头函数</li>
        <li>函数参数默认值</li>
        <li>模板字符串</li>
        <li>解构赋值</li>
        <li>延展操作符</li>
        <li>对象属性简写</li>
        <li>Promise</li>
        <li>Let与Const</li>
      </div>
    </div>

    <div class="box">
      <div>兼容性处理</div>
      <div class="content">
        <li>开发依赖autoprefixer（ 它提供了一种方式用JavaScript代码来处理CSS。利用PostCSS可以实现一些工程化的操作，如：自动添加浏览器前缀，代码合并，代码压缩等）</li>
           
      </div>
    </div>
    <div class="box">
      <div>XSS攻击</div>
      <div class="content"></div>
    </div>

    <div class="box">
      <div>CSRF</div>
    </div>
    <div class="box">
      <div>axios二次封装</div>
    </div>

    <div class="box">
      <div>var没有块级作用于，变量声明提升</div>
    </div>

    <div class="box">
      <div>undefined</div>
      <li>已经声明，未负值 let a，consle.log(a) undefined</li>
      <li>对象的属性不存在let obj = {}，consle.log(obj.a) undefined</li>
      <li>传参少传一个参数，那么这个参数的打印 undefined</li>
      <li>常规函数的默认返回 undefined</li>
      <li>构造函数的默认返回 实例</li>
    </div>

    <div class="box">
      <div>null</div>
      <li>函数的回收 let obj = "a";obj=nulll</li>
      <li>函数的传参null 表明该传参不是一个对象</li>
      <li>原型链的顶端</li>
    </div>
    <div class="box">
      <div>数组</div>
      <li>filter不会影响原数组</li>

      <li>foreach 没有返回值，不能break打断</li>
      <li>map 有返回值，不能break打断</li>
    </div>
    <div class="box">
      <div>闭包</div>
      <li>方法里返回一个方法</li>
      <li>延长变量的生命周期</li>
      <li>创建私有环境</li>
    </div>
    <div class="box">
      <div>防抖</div>
      <el-input
        style="width: 200px; margin-bottom: 10px"
        v-model="debounceValue"
        @input="
          (e) => {
            this.debounceInput(e);
          }
        "
        size="mini"
      ></el-input>
      <div>
        <Code :code="debounceCode" height="250px" />
      </div>
    </div>
    <div class="box">
      <div>节流</div>
      <li>提交表单 （多次点击只提交第一次点击）</li>
      <li>高频监听事件</li>
      <el-button
        size="mini"
        @click="submit"
        style="width: 200px; margin: 10px 0"
        type="primary"
        >表单提交</el-button
      >
      <div>
        <Code :code="throttleCode" height="250px" />
      </div>
    </div>
    <div class="box">
      <div>原型、原型链</div>
      <li>是函数特有的</li>
      <li>任何的数据都有原型链</li>
      <li>为了继承</li>
    </div>

    <div class="box">
      <div>判断数组的方法</div>
      <Code :code="judgeArray" height="180px" />
    </div>
    <div class="box">
      <div>promise</div>
      <Code :code="promiseString" height="300px" />
    </div>
    <div class="box">
      <div>
        预编译
        <el-button size="mini" @click="perBianYi">输出</el-button>
        <Code :code="yubianyiResult" height="auto" />
      </div>
      <Code :code="perBianYiString" height="300px" />
    </div>
    <div class="box">
      <div>
        代码实现call
        <el-button @click="callClick" size="mini">实现call方法</el-button>
      </div>
      <Code :code="myCallString" height="280px" />
    </div>
    <div class="box">
      <div>性能优化</div>
      <p>
        a 加载 1.减少http请求（精灵图，文件的合并）
        2.减少文件大小（资源压缩，图片压缩，代码压缩）
        3.CDN（第三方库，大文件，大图） 4.SSR服务端渲染 5.懒加载 6.分包
      </p>

      b 性能 1.减少dom操作，避免回流，文档碎片
    </div>
  </div>
</template>

<script>
import debounce, { debouceString } from "@/utils/debounce";
import throttle, { throttleString } from "@/utils/throttle";
import myCall, { myCallString } from "./js/mycall";
import {
  judgeArray,
  promiseString,
  perBianYiString,
  perBianYi,
  yubianyiResult,
} from "./js/codeView.js";
import Code from "@/components/Prism.vue";
export default {
  name: "Exercises",
  components: {
    Code,
  },
  data() {
    return {
      xss: "123",
      debounceValue: "",
      promiseString,
      judgeArray,
      perBianYiString,
      myCallString,
      yubianyiResult: "输出结果：",
      debounceCode: debouceString,
      throttleCode: throttleString,
    };
  },
  methods: {
    debounceInput(value) {
      this.$message.success(`返回成功--${value}`);
    },
    submit() {
      this.$message.success(`表单提价成功，仅提交了第一次`);
    },
    perBianYi() {
      perBianYi(1, 2);
      this.yubianyiResult = yubianyiResult;
    },
    callClick() {
      // Function.prototype.myCall = function (context) {
      //   // this必须是一个方法
      //   if(typeof this !== 'function') return
      //   // 没有context，则取值window
      //   context = context || window
      //   // 获取第一个参数外的参数
      //   const  args = [...arguments].slice(1);
      //   // 把需要调用的方法赋值给上下文
      //   context.fn = this
      //   // 上下文调用改方法并返回
      //   return context.fn(...args)
      // }
      let p2 = {
        name: "lisi",
      };
      let person = {
        name: "zhangsan",
        say(param) {
          console.log(this.name, param);
        },
      };
      person.say.myCall(p2, "mycall");
    },
  },
  created() {
    this.debounceInput = debounce(this.debounceInput, 1000);
    this.submit = throttle(this.submit, 2000);
  },
};
</script>



<style lang="less" scoped>
.exercises {
  font-size: 14px;
  .box {
    padding: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    & > div:first-child {
      padding-bottom: 10px;
      font-family: 隶书;
      font-size: 18px;
      font-weight: bold;
    }
    > p {
      padding: 5px 0;
    }
  }
}
</style>